<template>
  <div class="text-input">
    <el-text class="mx-1">{{ options.text }}</el-text>
    <el-input
      v-model="info"
      style="width: 240px"
      :type="options.type ? 'password' : 'text'"
      :placeholder="options.placeholder"
      :show-password="options.type === 'password' ? true : false"
      clearable
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 父子通信
const props = defineProps({
  options: {
    text: String,
    placeholder: String,
    // text文本框，password密码框，默认为text
    type: {
      type: String,
      default: '',
    },
  },
})

const options = props.options

const emit = defineEmits(['change'])

// 绑定输入框内容
const info = ref('')

// 监听输入框
watch(info, (val) => {
  emit('change', val)
})
</script>

<style scoped less="scss">
.text-input {
  width: 350px;
  height: 50px;

  .mx-1 {
    font-weight: 500;
  }

  .el-input {
    margin-top: 10px;
    width: 350px !important;
  }
}
</style>
